<template>
  <div class="app-container">
    <e-header :query="query" @onMineClicked="onMineClicked" @onCouseFinish="onCouseFinish" @onNoClass="onNoClass" @onFinishCourse="onFinishCourse"/>
    <!--列表-->
    <el-table v-loading="loading" :data="betterData" :span-method="mergeRow">
      <el-table-column type="index" label="序号">
        <template slot-scope="scope">
          <span>{{ scope.row.idx + (page - 1) * size + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="70">
        <template slot-scope="scope">
          <router-link :to="`/education/student/${scope.row.merchantStudentId}`">
            <el-button type="text">{{ scope.row.name }}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="报名课程" min-width="160">
        <template slot-scope="scope">
          <div class="content-rowspan">
            {{ scope.row.courseName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="课程类型" prop="typeTxt">
        <template slot-scope="scope">
          {{ scope.row.typeTxt || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="班级名称" min-width="160">
        <template slot-scope="scope">
          <div class="content-rowspan">
            {{ scope.row.className || '-' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="课时" width="55">
        <template slot-scope="scope">
          <div class="content-rowspan">
            {{ scope.row.courseHour || 0 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="剩余" width="55">
        <template slot-scope="scope">
          <div class="content-rowspan">
            {{ scope.row.courseHour - scope.row.spendHour || 0 }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="classProgress" label="课程进度" min-width="120">
        <template slot-scope="scope">
          <el-tooltip :content="(scope.row.spendHour + '/' + scope.row.courseHour)" class="item" effect="dark" placement="top">
            <el-progress :percentage="+((scope.row.spendHour) * 100 / scope.row.courseHour).toFixed(1)"/>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="school" label="就读学校" min-width="150" />
      <el-table-column prop="gradeTxt" label="当前年级" />
      <el-table-column prop="advisorName" label="学管老师">
        <template slot-scope="scope">
          {{ scope.row.advisorName || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="签约日期" min-width="100">
        <template slot-scope="scope">
          {{ scope.row.signDate | formatDate('yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column prop="statusTxt" label="学员状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" type="success">{{ scope.row.statusTxt }}</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">{{ scope.row.statusTxt }}</el-tag>
          <el-tag v-else-if="scope.row.status === 3"  type="warning">{{ scope.row.statusTxt }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="handleBook(scope.$index, scope.row)">订课</el-button>
          <em class="block-col"/>
          <el-button type="text" @click="handleSelect(scope.$index, scope.row)">分班</el-button>
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="handleRecharge(scope.$index, scope.row)">续费</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button type="text" @click="handleAdvisor(scope.$index, scope.row)" v-permission="['ADMIN', 'ROLE_STUDY_ADVSIOR_MAN']">学管</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>

    <!--选班界面-->
    <select-class ref="selectClassDlg"
      :merchant-student-id="merchantStudentId"
      :student-name="studentName"
      :course-info-list="courseInfoList"
      @selectClassSucc="onSelectClassSucc"/>

    <recharge-dialog ref="rechargeDlg"
      :merchant-student-id="merchantStudentId"
      :student-name="studentName"/>
  
    <!--指派学管师组件-->
    <advisor-dialog ref="advisorDlg"
      :student-id="merchantStudentId" 
      :student-name="studentName"/>

    <book-dialog ref="bookDialog"
      :merchant-student-id="merchantStudentId"
      :student-name="studentName"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import eHeader from './module/header'
import selectClass from './module/selectClass'
import RechargeDialog from './module/recharge'
import AdvisorDialog from './module/advisor'
import bookDialog from '../../components/BookCourse'

export default {
  components: { eHeader, selectClass, RechargeDialog, AdvisorDialog, bookDialog },
  mixins: [initData],
  data() {
    return {
      merchantStudentId: 0,
      studentName: '',
      filters: {
        name: '',
        type: null
      },
      courseInfoList: []
    }
  },
  computed: {
    betterData() {
      return this.data.reduce((all, curr, idx) => {
        const classInfo = curr.courseInfoList
        if (Array.isArray(classInfo) && classInfo.length > 0) {
          const rowCollapse = classInfo.length
          classInfo.forEach((classInfo, index) => {
            let rowColSpan = rowCollapse > 1 ? (index === 0 ? [rowCollapse, 1] : [0, 0]) : [1, 1]
            all.push({ ...curr, ...classInfo, rowColSpan, idx })
          })
        } else {
          all.push({ ...curr, rowColSpan: [1, 1], idx })
        }
        return all
      }, [])
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = 'student/list'
      const sort = 'merchant_student_id desc'
      this.params = {
        name: this.query.name,
        classType: this.query.classType,
        almostFinish: this.query.almostFinish,
        noClass: this.query.noClass,
        finishCourse: this.query.finishCourse,
        mine: this.query.mine,
        page: this.page,
        size: this.size,
        sort: sort
      }
      return true
    },
    mergeRow({ row, column, rowIndex, columnIndex }) {
      if ([2, 3, 4, 5, 6].indexOf(columnIndex) === -1) {
        return row.rowColSpan
      }
    },
    // 性别显示转换
    formatgender: function(row, column) {
      return row.gender === 1 ? '男' : row.gender === 0 ? '女' : '未知'
    },
    // 显示选班界面
    handleSelect(index, row) {
      this.merchantStudentId = Number(row.merchantStudentId)
      this.studentName = row.name
      this.courseInfoList = row.courseInfoList
      this.$refs.selectClassDlg.visible = true
    },
    onSelectClassSucc() {
      this.init()
    },
    handleView: function(row) {
      this.$router.push({
        path: 'student/' + row.merchantStudentId
      })
    },
    // 显示续费对话框
    handleRecharge: function(index, row) {
      this.merchantStudentId = Number(row.merchantStudentId)
      this.studentName = row.name
      this.$refs.rechargeDlg.visible = true
    },
    // 显示课程顾问对话框
    handleAdvisor: function(index, row) {
      this.merchantStudentId = Number(row.merchantStudentId)
      this.studentName = row.name
      this.$refs.advisorDlg.dialog = true
    },
    handleBook: function(index, row) {
      this.merchantStudentId = Number(row.merchantStudentId)
      this.studentName = row.name
      this.$refs.bookDialog.visible = true
    },
    onMineClicked: function(status) {
      this.init()
    },
    onCouseFinish: function(status) {
      this.init()
    },
    onNoClass: function(status) {
      this.init()
    },
    onFinishCourse: function(status) {
      this.init()
    }
  }
}
</script>

<style scoped>
.el-button {
  margin-left: 0
}
</style>
